<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.60">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/logo.png"><title>Vue基础 | 王茂铭</title><meta name="description" content="Just playing around">
    <link rel="modulepreload" href="/wb/assets/app-32a7af8e.js"><link rel="modulepreload" href="/wb/assets/framework-c27b6911.js"><link rel="modulepreload" href="/wb/assets/092102.html-047558e2.js"><link rel="modulepreload" href="/wb/assets/092102.html-74b61e87.js"><link rel="prefetch" href="/wb/assets/index.html-6d5e9dd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8e728de0.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-71f98eb6.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-47172bd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c4d32c30.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-75e9cb1a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a2c706b5.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-17c6444b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6958f27b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d981608d.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ff4c5386.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-97c1c024.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8596a00c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2434c570.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0b4e72f2.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-70379254.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-bcce1cd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e1575d57.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c08582eb.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4df8ef63.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-fa97dbe9.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ea3cbcd8.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5d7f901a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ec6cc437.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8802c78f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c5b96a91.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-55c1ed81.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f36d8351.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-da9b2394.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5ac52d4f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-27e68ae7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-1834aef1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d4810458.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-560c14b4.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-35b38f45.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-93b00c29.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f42fa99c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c7a62b28.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-7f3eeb92.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c8596e07.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f6681850.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2773f5fc.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6cf06f14.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-1a88d37b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c8e98ed0.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-800887e5.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-06f5ab5e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-db4c3376.js" as="script"><link rel="prefetch" href="/wb/assets/031101.html-02798306.js" as="script"><link rel="prefetch" href="/wb/assets/031102.html-15b3adb4.js" as="script"><link rel="prefetch" href="/wb/assets/031501.html-3134e3b4.js" as="script"><link rel="prefetch" href="/wb/assets/122102.html-ceeb362a.js" as="script"><link rel="prefetch" href="/wb/assets/010601.html-3fe2b350.js" as="script"><link rel="prefetch" href="/wb/assets/010602.html-d33aafe0.js" as="script"><link rel="prefetch" href="/wb/assets/010603.html-731c8a98.js" as="script"><link rel="prefetch" href="/wb/assets/010604.html-6bc8d643.js" as="script"><link rel="prefetch" href="/wb/assets/010701.html-12966c2a.js" as="script"><link rel="prefetch" href="/wb/assets/010801.html-0fca227d.js" as="script"><link rel="prefetch" href="/wb/assets/011001.html-d10dc4a2.js" as="script"><link rel="prefetch" href="/wb/assets/011201.html-bbd7d0bc.js" as="script"><link rel="prefetch" href="/wb/assets/011202.html-f1b9f476.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-f7ba82d3.js" as="script"><link rel="prefetch" href="/wb/assets/011501.html-9196b987.js" as="script"><link rel="prefetch" href="/wb/assets/010501.html-43e0fee1.js" as="script"><link rel="prefetch" href="/wb/assets/031801.html-0a02ab60.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-2c9d1221.js" as="script"><link rel="prefetch" href="/wb/assets/081101.html-86de4307.js" as="script"><link rel="prefetch" href="/wb/assets/092001.html-20d934d3.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-1890511d.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-ae3f31b4.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-74cff86b.js" as="script"><link rel="prefetch" href="/wb/assets/092104.html-004f7a47.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-3f3fe144.js" as="script"><link rel="prefetch" href="/wb/assets/122101.html-f85b1d72.js" as="script"><link rel="prefetch" href="/wb/assets/122201.html-572b8a97.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-b6d3d031.js" as="script"><link rel="prefetch" href="/wb/assets/092106.html-709c9d31.js" as="script"><link rel="prefetch" href="/wb/assets/121501.html-6bc29a5d.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-f5635806.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-054223dd.js" as="script"><link rel="prefetch" href="/wb/assets/guide.html-561bbc0f.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-a89f05e1.js" as="script"><link rel="prefetch" href="/wb/assets/021401.html-b25135ac.js" as="script"><link rel="prefetch" href="/wb/assets/022001.html-3fd7ebe7.js" as="script"><link rel="prefetch" href="/wb/assets/022101.html-f6317717.js" as="script"><link rel="prefetch" href="/wb/assets/030801.html-cbbde2a3.js" as="script"><link rel="prefetch" href="/wb/assets/032201.html-33e3ac66.js" as="script"><link rel="prefetch" href="/wb/assets/022201.html-963afee1.js" as="script"><link rel="prefetch" href="/wb/assets/030501.html-84913c94.js" as="script"><link rel="prefetch" href="/wb/assets/home.html-3eb4d994.js" as="script"><link rel="prefetch" href="/wb/assets/plugin.html-1483d1d0.js" as="script"><link rel="prefetch" href="/wb/assets/standard.html-14b52c51.js" as="script"><link rel="prefetch" href="/wb/assets/vuePackage.html-0219c43d.js" as="script"><link rel="prefetch" href="/wb/assets/404.html-60b35caa.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-cc91309e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-605912bc.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-beb31cc7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b61a46e1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f98e8ff2.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-fa9fcc1d.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-073d6df6.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c3fee9e4.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-52c1909f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-def60933.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-76d7399e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-cc87ab1a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-49a24dd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f6c26c3a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4a7242ff.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b00d5359.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e2ee4194.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e4115364.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4521aa3a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c4b820ea.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6fdefc04.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-50818995.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2014b8cd.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b1dc5ed7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2ddb2e51.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-72fa249f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-217d2183.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0b40087e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c52474d7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8489252c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2407d7b8.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-daf2f840.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-db0ba367.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0999e780.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ff3616e1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-40ca6f0a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ba22b693.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f989ee07.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d7d4cc9f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6ee6582b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-955dcc0f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5feeb1e7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a5819ddb.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a45e3ca9.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-452ace3c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-46c84a4f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b428ebd7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8380941b.js" as="script"><link rel="prefetch" href="/wb/assets/031101.html-b6a75232.js" as="script"><link rel="prefetch" href="/wb/assets/031102.html-7868935d.js" as="script"><link rel="prefetch" href="/wb/assets/031501.html-a7e44746.js" as="script"><link rel="prefetch" href="/wb/assets/122102.html-6865b75f.js" as="script"><link rel="prefetch" href="/wb/assets/010601.html-dad7a79c.js" as="script"><link rel="prefetch" href="/wb/assets/010602.html-7fb1cd64.js" as="script"><link rel="prefetch" href="/wb/assets/010603.html-e563daab.js" as="script"><link rel="prefetch" href="/wb/assets/010604.html-815b9c8a.js" as="script"><link rel="prefetch" href="/wb/assets/010701.html-2b4e145e.js" as="script"><link rel="prefetch" href="/wb/assets/010801.html-b73655fc.js" as="script"><link rel="prefetch" href="/wb/assets/011001.html-2b9771e1.js" as="script"><link rel="prefetch" href="/wb/assets/011201.html-1af6d9d4.js" as="script"><link rel="prefetch" href="/wb/assets/011202.html-9093c19a.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-a03518e6.js" as="script"><link rel="prefetch" href="/wb/assets/011501.html-e90b5831.js" as="script"><link rel="prefetch" href="/wb/assets/010501.html-2ebe48c4.js" as="script"><link rel="prefetch" href="/wb/assets/031801.html-e190b745.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-3f4ca6b9.js" as="script"><link rel="prefetch" href="/wb/assets/081101.html-c0375214.js" as="script"><link rel="prefetch" href="/wb/assets/092001.html-b2f5f9d7.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-40dbcdf2.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-111fa3dd.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-dfe62a63.js" as="script"><link rel="prefetch" href="/wb/assets/092104.html-6ea8f578.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-f58f55b7.js" as="script"><link rel="prefetch" href="/wb/assets/122101.html-a20220c8.js" as="script"><link rel="prefetch" href="/wb/assets/122201.html-7699eb69.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-ea49cb27.js" as="script"><link rel="prefetch" href="/wb/assets/092106.html-6d252224.js" as="script"><link rel="prefetch" href="/wb/assets/121501.html-4c68ef56.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-01673776.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-49fde8c8.js" as="script"><link rel="prefetch" href="/wb/assets/guide.html-85aeb00d.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-869da26f.js" as="script"><link rel="prefetch" href="/wb/assets/021401.html-ecbb30c7.js" as="script"><link rel="prefetch" href="/wb/assets/022001.html-f65da4af.js" as="script"><link rel="prefetch" href="/wb/assets/022101.html-bf352765.js" as="script"><link rel="prefetch" href="/wb/assets/030801.html-c3885c66.js" as="script"><link rel="prefetch" href="/wb/assets/032201.html-86eb91fa.js" as="script"><link rel="prefetch" href="/wb/assets/022201.html-998fc43b.js" as="script"><link rel="prefetch" href="/wb/assets/030501.html-61615073.js" as="script"><link rel="prefetch" href="/wb/assets/home.html-5d4ac598.js" as="script"><link rel="prefetch" href="/wb/assets/plugin.html-85fb2e2c.js" as="script"><link rel="prefetch" href="/wb/assets/standard.html-52035280.js" as="script"><link rel="prefetch" href="/wb/assets/vuePackage.html-6cc12cdb.js" as="script"><link rel="prefetch" href="/wb/assets/404.html-16732b58.js" as="script"><link rel="prefetch" href="/wb/assets/reco-valine-a0c1af1f.js" as="script">
    <link rel="preload" href="/wb/assets/style-cad7fe2b.css" as="style"><link rel="stylesheet" href="/wb/assets/style-cad7fe2b.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper series--no show-catalog"><div><header class="navbar-container"><!--[--><div class="site-brand nav-item"><img class="logo" src="/wb/logo.png" alt="王茂铭"><a href="/wb/" class="site-name can-hide">王茂铭</a></div><div class="nav-item navbar-links-wrapper" style=""><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form><nav class="navbar-links"><!--[--><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Categories"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Categories"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/categories/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/React/1/" class="link" aria-label="React"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->React<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/Angular/1/" class="link" aria-label="Angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/WebGIS/1/" class="link" aria-label="WebGIS"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->WebGIS<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/gongjuyuyuedu/1/" class="link" aria-label="工具与阅读"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->工具与阅读<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/houduan/1/" class="link" aria-label="后端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->后端<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Tags"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Tags"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/tags/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qiankun/1/" class="link" aria-label="qiankun"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->qiankun<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/react/1/" class="link" aria-label="react"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->react<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/element/1/" class="link" aria-label="element"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->element<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/tree/1/" class="link" aria-label="tree"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->tree<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/js/1/" class="link" aria-label="js"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->js<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/daimajiqiao/1/" class="link" aria-label="代码技巧"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->代码技巧<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/diceng/1/" class="link" aria-label="底层"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->底层<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/angular/1/" class="link" aria-label="angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/echars/1/" class="link" aria-label="echars"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->echars<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/keshihua/1/" class="link" aria-label="可视化"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->可视化<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/gaodeditu/1/" class="link" aria-label="高德地图"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->高德地图<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shouce/1/" class="link" aria-label="手册"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->手册<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/es6/1/" class="link" aria-label="es6"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->es6<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/jianrongxing/1/" class="link" aria-label="兼容性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->兼容性<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/node/1/" class="link" aria-label="node"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->node<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/html/1/" class="link" aria-label="html"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->html<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/css/1/" class="link" aria-label="css"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->css<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/python/1/" class="link" aria-label="python"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->python<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/flask/1/" class="link" aria-label="flask"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->flask<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/Objective-C/1/" class="link" aria-label="Objective-C"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Objective-C<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/webpack/1/" class="link" aria-label="webpack"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->webpack<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/git/1/" class="link" aria-label="git"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->git<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shuji/1/" class="link" aria-label="书籍"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->书籍<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/aihao/1/" class="link" aria-label="爱好"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->爱好<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><a href="/wb/" class="link router-link-active" aria-label="首页"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->首页<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="文档"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="文档"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/home" class="link" aria-label="公共方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->公共方法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/vuePackage" class="link" aria-label="vue组件包"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue组件包<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/standard" class="link" aria-label="前端代码规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端代码规范<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><span class="xicon-container btn-toggle-dark-mode btn--dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></span><span class="xicon-container btn-toggle-menus"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><circle cx="16" cy="8" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="24" r="2" fill="currentColor"></circle></svg></span></div><!--]--></header><div class="mobile-menus-container"><nav class="navbar-links mobile"><!--[--><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Categories"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Categories"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/categories/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/React/1/" class="link" aria-label="React"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->React<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/Angular/1/" class="link" aria-label="Angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/WebGIS/1/" class="link" aria-label="WebGIS"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->WebGIS<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/gongjuyuyuedu/1/" class="link" aria-label="工具与阅读"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->工具与阅读<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/houduan/1/" class="link" aria-label="后端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->后端<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Tags"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Tags"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/tags/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qiankun/1/" class="link" aria-label="qiankun"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->qiankun<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/react/1/" class="link" aria-label="react"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->react<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/element/1/" class="link" aria-label="element"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->element<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/tree/1/" class="link" aria-label="tree"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->tree<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/js/1/" class="link" aria-label="js"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->js<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/daimajiqiao/1/" class="link" aria-label="代码技巧"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->代码技巧<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/diceng/1/" class="link" aria-label="底层"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->底层<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/angular/1/" class="link" aria-label="angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/echars/1/" class="link" aria-label="echars"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->echars<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/keshihua/1/" class="link" aria-label="可视化"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->可视化<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/gaodeditu/1/" class="link" aria-label="高德地图"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->高德地图<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shouce/1/" class="link" aria-label="手册"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->手册<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/es6/1/" class="link" aria-label="es6"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->es6<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/jianrongxing/1/" class="link" aria-label="兼容性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->兼容性<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/node/1/" class="link" aria-label="node"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->node<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/html/1/" class="link" aria-label="html"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->html<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/css/1/" class="link" aria-label="css"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->css<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/python/1/" class="link" aria-label="python"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->python<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/flask/1/" class="link" aria-label="flask"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->flask<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/Objective-C/1/" class="link" aria-label="Objective-C"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Objective-C<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/webpack/1/" class="link" aria-label="webpack"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->webpack<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/git/1/" class="link" aria-label="git"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->git<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shuji/1/" class="link" aria-label="书籍"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->书籍<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/aihao/1/" class="link" aria-label="爱好"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->爱好<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><a href="/wb/" class="link router-link-active" aria-label="首页"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->首页<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="文档"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="文档"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/home" class="link" aria-label="公共方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->公共方法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/vuePackage" class="link" aria-label="vue组件包"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue组件包<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/standard" class="link" aria-label="前端代码规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端代码规范<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><div class="appearance"><span>Appearance</span><span class="xicon-container btn-toggle-dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></span></div></div><div class="series-mask"></div><aside class="series-container"><div class="site-brand"><img class="logo" src="/wb/logo.png" alt="王茂铭"><a href="/wb/" class="site-name can-hide">王茂铭</a></div><!--[--><!--]--></aside><!--[--><main class="page-container"><h1 class="page-title">Vue基础</h1><div class="page-info"><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M16 4a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7z" fill="currentColor"></path><path d="M26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->王茂铭<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2019-09-21<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M10 14a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm0-6a2 2 0 1 0 1.998 2.004A2.002 2.002 0 0 0 10 8z" fill="currentColor"></path><path d="M16.644 29.415L2.586 15.354A2 2 0 0 1 2 13.941V4a2 2 0 0 1 2-2h9.941a2 2 0 0 1 1.414.586l14.06 14.058a2 2 0 0 1 0 2.828l-9.943 9.943a2 2 0 0 1-2.829 0zM4 4v9.942L18.058 28L28 18.058L13.942 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!----></div><div class="theme-reco-default-content"><div><h2 id="vue基础" tabindex="-1"><a class="header-anchor" href="#vue基础" aria-hidden="true">#</a> Vue基础</h2><h3 id="vue-js是什么" tabindex="-1"><a class="header-anchor" href="#vue-js是什么" aria-hidden="true">#</a> Vue.js是什么</h3><blockquote><p>vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p></blockquote><h3 id="vue实例" tabindex="-1"><a class="header-anchor" href="#vue实例" aria-hidden="true">#</a> Vue实例</h3><p>Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 1、在文件中引入vue.js，下面两种方式选择其中一种</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>&lt;script type=&quot;text/javascript&quot; src=&quot;../vue.js&quot;&gt;&lt;/script&gt;
&lt;!-- 开发环境版本，包含了有帮助的命令行警告 --&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>2、建立简单的vue实例对象</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>&lt;div id=&quot;app&quot;&gt;
	//调用vue中的数据
	&lt;h1&gt;{{message}}&lt;/h1&gt;
	//下面的两种书写方式结果相同
	&lt;button v-on:click=&quot;click()&quot;&gt;click&lt;/button&gt;
	&lt;button @click=&quot;click()&quot;&gt;click01&lt;/button&gt;
&lt;/div&gt;

&lt;script&gt;
		var ve=	new Vue({
				el:&#39;#app&#39;,
				data:{
					message:&#39;hello&#39;,
				},
				methods:{
					click:function(){
						alert(&quot;你好，世界&quot;);
					}
				}
			});
&lt;/script&gt;

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vue常用指令" tabindex="-1"><a class="header-anchor" href="#vue常用指令" aria-hidden="true">#</a> vue常用指令</h3><p>1、v-on：绑定事件监听器，事件的类型由参数决定 例如：v-on：事件名称 或者@事件名称</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>click()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>click()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>2、v-if/v-else-if/v-else判断指令：根据表达式的值，进行渲染</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
			//isshow为true时，标签内的内容显示到页面
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isshow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{isshow}}ok<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
			<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
				<span class="token literal-property property">el</span><span class="token operator">:</span><span class="token string">&#39;#app&#39;</span><span class="token punctuation">,</span>
				<span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>
					<span class="token literal-property property">message</span><span class="token operator">:</span><span class="token string">&#39;hello&#39;</span><span class="token punctuation">,</span>
					<span class="token literal-property property">isshow</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span>
					<span class="token function-variable function">click</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;你好，世界&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>3、v-model：数据绑定指令（一般为表单输入绑定）</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//v-model 指令在表单&lt;input&gt;、&lt;textarea&gt; 及 &lt;select&gt; 元素上创建双向数据绑定</span>
<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;text&quot;</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;message&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>message<span class="token punctuation">}</span><span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>4、v-for：循环（可以多层嵌套显示和java中的for循环原理一致） v-for格式：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>li v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span>“item <span class="token keyword">in</span> items”<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">&lt;</span><span class="token operator">/</span> li<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>其中：item是被迭代数组元素的别名 items是源数据数组 使用 item in items 的特殊格式语法</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in items<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in arr1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in arr1.a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
			<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
				<span class="token literal-property property">el</span><span class="token operator">:</span><span class="token string">&#39;#demo&#39;</span><span class="token punctuation">,</span>
				<span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>
					<span class="token literal-property property">items</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span><span class="token number">23</span><span class="token punctuation">,</span><span class="token number">344</span><span class="token punctuation">,</span><span class="token number">45</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
					<span class="token literal-property property">arr1</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token string-property property">&quot;a&quot;</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token string-property property">&quot;b&quot;</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>5、v-bind：动态绑定属性 使用格式 v-bind:属性名=“data数据对象中的值” 简写 ：属性名=“data数据对象中的值”</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>styple<span class="token operator">&gt;</span>
<span class="token punctuation">.</span>child<span class="token punctuation">{</span>
	<span class="token literal-property property">width</span><span class="token operator">:</span> 50px<span class="token punctuation">;</span>
	<span class="token literal-property property">height</span><span class="token operator">:</span> 50px<span class="token punctuation">;</span>
	background<span class="token operator">-</span>color<span class="token operator">:</span> gray<span class="token punctuation">;</span>
	<span class="token literal-property property">color</span><span class="token operator">:</span> black<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;app&quot;</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>img v<span class="token operator">-</span>bind<span class="token operator">:</span>src<span class="token operator">=</span><span class="token string">&quot;img&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span> <span class="token comment">//动态绑定了imges属性，img改变了图片，那么img标签也会改变</span>
	<span class="token operator">&lt;</span>div <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;{&#39;child&#39;:isshow}&quot;</span><span class="token operator">&gt;</span>div6<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span> <span class="token comment">//div区域的显示根据isshow的值来判定</span>
	
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
	<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
				<span class="token literal-property property">el</span><span class="token operator">:</span><span class="token string">&#39;#app&#39;</span><span class="token punctuation">,</span>
				<span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>
				<span class="token literal-property property">isshow</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
				<span class="token literal-property property">img</span><span class="token operator">:</span><span class="token string">&#39;111.png&#39;</span><span class="token punctuation">,</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span>	
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="生命周期函数-钩子函数" tabindex="-1"><a class="header-anchor" href="#生命周期函数-钩子函数" aria-hidden="true">#</a> 生命周期函数|钩子函数</h3><p>1、生命周期函数</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>beforeCreate

<span class="token function">在实例初始化之后，数据观测</span><span class="token punctuation">(</span>data observer<span class="token punctuation">)</span> 和 event<span class="token operator">/</span>watcher 事件配置之前被调用。

created

<span class="token function">实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测</span><span class="token punctuation">(</span>data observer<span class="token punctuation">)</span>，属性和方法的运算， watch<span class="token operator">/</span>event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm<span class="token punctuation">.</span>$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 <span class="token constant">DOM</span> 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 <span class="token constant">DOM</span> 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 <span class="token constant">DOM</span> 已经更新，所以你现在可以执行依赖于 <span class="token constant">DOM</span> 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><img src="/wb/lifecycle.png" alt="foo"> 2、下面用一个生命周期函数演示的实例 <div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changemessage()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>changemessage<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
			<span class="token keyword">var</span> ve <span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
					<span class="token literal-property property">el</span><span class="token operator">:</span><span class="token string">&#39;#demo&#39;</span><span class="token punctuation">,</span>
					<span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>
						<span class="token literal-property property">message</span><span class="token operator">:</span><span class="token string">&#39;vue生命周期&#39;</span><span class="token punctuation">,</span>
						
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token function-variable function">beforeCreate</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">&quot;------------beforecreate-----------&quot;</span><span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;el:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;data:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;message:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token function-variable function">created</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">&quot;------------created-----------&quot;</span><span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;el:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;data:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;message:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token function-variable function">beforeMount</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">&quot;------------beforemount-----------&quot;</span><span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;el:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;data:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;message:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token function-variable function">mounted</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">&quot;------------mounted-----------&quot;</span><span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;el:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;data:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;message:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token function-variable function">beforeUpdate</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">&quot;------------beforeupdate-----------&quot;</span><span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;el:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;data:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;message:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token function-variable function">updated</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">&quot;------------updated-----------&quot;</span><span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;el:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;data:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;message:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token function-variable function">beforeDestroy</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">&quot;------------destotry-----------&quot;</span><span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;el:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;data:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;message:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token function-variable function">destroyed</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">&quot;------------destroyed-----------&quot;</span><span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;el:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;data:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;message:&#39;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span>
						<span class="token function-variable function">changemessage</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
							<span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token operator">=</span><span class="token string">&#39;666&#39;</span>
						<span class="token punctuation">}</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//销毁是在实例外面调用的</span>
				ve<span class="token punctuation">.</span><span class="token function">$destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>实际效果 <img src="/wb/lifecycleshow01.png" alt="foo"> 点击changemessage按钮 <img src="/wb/lifecycleshow02.png" alt="foo"></p><h3 id="vue组件化应用构建" tabindex="-1"><a class="header-anchor" href="#vue组件化应用构建" aria-hidden="true">#</a> vue组件化应用构建</h3><p>组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树： <img src="/wb/components.png" alt="foo"> 1、为什么使用组件？ 使用组件一方面可以不用去直接修改标签，另一方面也会优化页面显示 注意:组件在实例前面书写 2、组件注册（全局与局部）</p><h5 id="先看看全局组件的引用-就拿最常用的全局的暂无数据来举例-看看全局的是如何实现的。" tabindex="-1"><a class="header-anchor" href="#先看看全局组件的引用-就拿最常用的全局的暂无数据来举例-看看全局的是如何实现的。" aria-hidden="true">#</a> 先看看全局组件的引用，就拿最常用的全局的暂无数据来举例，看看全局的是如何实现的。</h5><p>（1）首先在components创建一个公共的目录，NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面，index.js用来导出这个组件。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> NoDataWords 可以灵活控制每个页面显示的内容  <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> NoDataHeight 可以灵活控制每个页面的高度  <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 如果你的页面都是统一的字体，统一的样式<span class="token punctuation">,</span>那就直接在这写死就好了 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;NoDataAtAll W100&quot;</span>
         <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{height: NoDataHeight }&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>NoDataWords<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token comment">// 就是基本的父子组件传值</span>
  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;NoDataHeight&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;NoDataWords&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>style lang<span class="token operator">=</span><span class="token string">&quot;scss&quot;</span> scoped<span class="token operator">&gt;</span>
<span class="token punctuation">.</span>NoDataAtAll <span class="token punctuation">{</span>
  font<span class="token operator">-</span>size<span class="token operator">:</span> 14px<span class="token punctuation">;</span>
  <span class="token literal-property property">color</span><span class="token operator">:</span> #<span class="token number">909399</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>(2) 然后就是在index.js中注册该组件</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> NoDataS <span class="token keyword">from</span> <span class="token string">&#39;./index.vue&#39;</span>
<span class="token keyword">const</span> noDataLists <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">install</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">Vue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 注册并获取组件，然后在main.js中引用，在Vue.use()就可以了</span>
        Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">&#39;noDataLists&#39;</span><span class="token punctuation">,</span> NoDataS<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> noDataLists
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>(3)在main.js中引入并使用该组件</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> noDataLists <span class="token keyword">from</span> <span class="token string">&#39;@/components/NoDatas/index&#39;</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>noDataLists<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h5 id="第二种-全局注册组件形式" tabindex="-1"><a class="header-anchor" href="#第二种-全局注册组件形式" aria-hidden="true">#</a> 第二种 全局注册组件形式</h5><img src="/wb/allzuchezujian01.png" alt="foo"> 先在main.js里这样写。 然后在App.vue里面 的template模板里 直接使用 <div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>users<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>users<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>加载使用即可 <img src="/wb/allzuchezujian02.png" alt="foo"> 局部组件引入方法 就是在App.vue里引入。 <img src="/wb/allzuchezujian03.png" alt="foo"> 2,.全局注册公共的函数 公共函数common.js</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> obj<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">fun2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">fun3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> obj
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>main.js中引入方法</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> common <span class="token keyword">from</span> <span class="token string">&#39;.icommon.js&#39;</span>
<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>common<span class="token operator">=</span>comm
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>其它组件中调用该方法的时候</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span>common<span class="token punctuation">.</span><span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="局部组件-局部组件放在实例中" tabindex="-1"><a class="header-anchor" href="#局部组件-局部组件放在实例中" aria-hidden="true">#</a> 局部组件:局部组件放在实例中</h4><p>父子组件可以嵌套使用 父子组件间作用域相互独立 子组件只能在父组件的模板中进行调用</p><p>子组件是父组件细化拆分的过程 父组件向子组件传值通过props进行</p><p>下面的示例中包含了父组件向子组件传值的功能</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;box&quot;</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>test<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>test<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">&#39;box1&#39;</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;text&quot;</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;message&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>box1 num<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> txt<span class="token operator">=</span><span class="token string">&#39;yi&#39;</span> <span class="token operator">:</span>msg<span class="token operator">=</span><span class="token string">&quot;message&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>box1<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>box1 num<span class="token operator">=</span><span class="token string">&quot;2&quot;</span> txt<span class="token operator">=</span><span class="token string">&#39;er&#39;</span> <span class="token operator">:</span>msg<span class="token operator">=</span><span class="token string">&quot;message&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>box1<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span> 

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">var</span> ve <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		<span class="token literal-property property">el</span><span class="token operator">:</span><span class="token string">&#39;#box&#39;</span><span class="token punctuation">,</span>
		<span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">//父級</span>
		<span class="token literal-property property">components</span><span class="token operator">:</span><span class="token punctuation">{</span>
			<span class="token string-property property">&#39;test&#39;</span><span class="token operator">:</span><span class="token punctuation">{</span>
				<span class="token literal-property property">template</span><span class="token operator">:</span><span class="token string">&quot;#box1&quot;</span><span class="token punctuation">,</span>
				<span class="token function-variable function">data</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					<span class="token keyword">return</span><span class="token punctuation">{</span>
						<span class="token literal-property property">message</span><span class="token operator">:</span><span class="token string">&#39;aaa&#39;</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token comment">//子级</span>
				<span class="token literal-property property">components</span><span class="token operator">:</span><span class="token punctuation">{</span>
					<span class="token string-property property">&#39;box1&#39;</span><span class="token operator">:</span><span class="token punctuation">{</span>
						<span class="token literal-property property">template</span><span class="token operator">:</span><span class="token string">&quot;#box2&quot;</span><span class="token punctuation">,</span>
						<span class="token comment">//子级想将父级的一个值，作为自己的一个局部变量</span>
						<span class="token function-variable function">data</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
							<span class="token keyword">return</span><span class="token punctuation">{</span>
								<span class="token literal-property property">mymsg</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>msg
							<span class="token punctuation">}</span>
						<span class="token punctuation">}</span><span class="token punctuation">,</span>
						<span class="token comment">//计算属性</span>
						<span class="token literal-property property">computed</span><span class="token operator">:</span><span class="token punctuation">{</span>
							<span class="token function-variable function">mymsg1</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
								<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>msg<span class="token operator">+</span><span class="token string">&#39;!&#39;</span>
							<span class="token punctuation">}</span>
						<span class="token punctuation">}</span><span class="token punctuation">,</span>
						<span class="token literal-property property">props</span><span class="token operator">:</span><span class="token punctuation">[</span>
							<span class="token string">&#39;num&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;txt&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;msg&#39;</span>
						<span class="token punctuation">]</span>
						<span class="token punctuation">}</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="自定义监听事件-子组件向父组件传值" tabindex="-1"><a class="header-anchor" href="#自定义监听事件-子组件向父组件传值" aria-hidden="true">#</a> 自定义监听事件（子组件向父组件传值）</h4><p>自定义监听事件： $emit() 传值的过程： 子组件设定了一个点击事件，点击事件中夹带着传递的值—》通过getval方法将拿到的值赋值给父组件的message—》父组件显示出message值</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>parent</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>parent</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&#39;</span>par<span class="token punctuation">&#39;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span> 父组件:{{parentmsg}}||{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>child</span> <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getval<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>child</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&#39;</span>child<span class="token punctuation">&#39;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fn()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>子组件:{{childmsg}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		<span class="token literal-property property">el</span><span class="token operator">:</span><span class="token string">&quot;#box&quot;</span><span class="token punctuation">,</span>
		<span class="token literal-property property">components</span><span class="token operator">:</span><span class="token punctuation">{</span>
			<span class="token string-property property">&quot;parent&quot;</span><span class="token operator">:</span><span class="token punctuation">{</span>
				<span class="token literal-property property">template</span><span class="token operator">:</span><span class="token string">&#39;#par&#39;</span><span class="token punctuation">,</span>
				<span class="token function-variable function">data</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					<span class="token keyword">return</span> <span class="token punctuation">{</span>
						<span class="token literal-property property">parentmsg</span><span class="token operator">:</span><span class="token string">&quot;父组件的信息&quot;</span><span class="token punctuation">,</span>
						<span class="token literal-property property">message</span><span class="token operator">:</span><span class="token string">&#39;&#39;</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span>
					<span class="token function-variable function">getval</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						<span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">=</span> val
						console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token literal-property property">components</span><span class="token operator">:</span><span class="token punctuation">{</span>
					<span class="token string-property property">&#39;child&#39;</span><span class="token operator">:</span><span class="token punctuation">{</span>
						<span class="token literal-property property">template</span><span class="token operator">:</span><span class="token string">&#39;#child&#39;</span><span class="token punctuation">,</span>
						<span class="token function-variable function">data</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
							<span class="token keyword">return</span><span class="token punctuation">{</span>
								<span class="token literal-property property">childmsg</span><span class="token operator">:</span><span class="token string">&#39;子组件的信息&#39;</span>
							<span class="token punctuation">}</span>
						<span class="token punctuation">}</span><span class="token punctuation">,</span>
						<span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span>
							<span class="token function-variable function">fn</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
								<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">&#39;change&#39;</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>childmsg<span class="token punctuation">)</span>
							<span class="token punctuation">}</span>
						<span class="token punctuation">}</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="slot插槽" tabindex="-1"><a class="header-anchor" href="#slot插槽" aria-hidden="true">#</a> SLOT插槽</h3><p>目的:其目的在于让组件的可扩展性更强,用来混合父组件的内容与子组件自己的模板. 分为匿名slot和具名slot 一、slot的作用 Q: 假如父组件需要在子组件内放一些DOM元素，那么这些DOM是显示呢还是不显示呢？</p><p>默认情况下是不会显示的，如下图所示，页面并没有显示父组件增加的<span>我是魔鬼</span>  元素内容。那么我执意要加DOM元素到子组件上该怎么实现呢？这就用到了slot插槽，使用slot这个标签可以将父组件放在子组件的内容，放到它想显示的地方</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>  
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>children</span><span class="token punctuation">&gt;</span></span>  
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>我是魔鬼<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>  
    <span class="token comment">&lt;!--上面这行不会显示--&gt;</span>  
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>children</span><span class="token punctuation">&gt;</span></span>  
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>  
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">  
  <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  
      <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">&#39;#app&#39;</span><span class="token punctuation">,</span>  
      <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>  
         <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">{</span>   
         <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">&quot;&lt;h1&gt;我是子组件&lt;/h1&gt;&quot;</span>  
       <span class="token punctuation">}</span>  
     <span class="token punctuation">}</span>  
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>  
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>二、简单理解slot 通俗易懂的讲，slot具有“占坑”的作用，在子组件占好了位置，那父组件使用该子组件标签时，新添加的DOM元素就会自动填到这个坑里面</p><p>三、单个slot     我们将上面的代码改一改 , 给child组件添加slot插槽，那么父组件的添加的DOM元素就填充到这个slot插槽里面了</p><p>注意：如果有多个DOM元素，会一起插入到</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>slot<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>slot<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>这个标签内</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;app&quot;</span><span class="token operator">&gt;</span>  
  <span class="token operator">&lt;</span>children<span class="token operator">&gt;</span>  
    <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>我是魔鬼<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>  
    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>上面这行会显示在 “我是子组件” 数据后面<span class="token operator">--</span><span class="token operator">&gt;</span>  
  <span class="token operator">&lt;</span><span class="token operator">/</span>children<span class="token operator">&gt;</span>  
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>  
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>  
  <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  
      <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">&#39;#app&#39;</span><span class="token punctuation">,</span>  
      <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>  
         <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">{</span>   
         <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">&quot;&lt;h1&gt;我是子组件&lt;/h1&gt;&lt;slot&gt;&lt;/slot&gt;&quot;</span>  
       <span class="token punctuation">}</span>  
     <span class="token punctuation">}</span>  
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>  
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>四、具名插槽 现在我们需要将父组件添加的HTML标签放在子组件里的不同位置。具名插槽实现：先在子组件对应分发slot标签里，添加name=”name名” 属性，其次父组件在要分发的标签里添加 slot=”name名” 属性，然后就会将对应的标签放在对应的位置了。</p><p>简单理解就是：给子组件占的每一个坑取名，将父组件添加的HTML元素添加到指定名字的坑，就实现了分发内容在不同位置显示</p><p>【Child组件模板】</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>slot name<span class="token operator">=</span><span class="token string">&quot;header&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>slot<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>h1<span class="token operator">&gt;</span>我是子组件<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>slot name<span class="token operator">=</span><span class="token string">&quot;footer&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>slot<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>【父组件引用Child组件】</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>Child<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>span slot<span class="token operator">=</span><span class="token string">&quot;header&quot;</span><span class="token operator">&gt;</span>我是header<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>span slot<span class="token operator">=</span><span class="token string">&quot;footer&quot;</span><span class="token operator">&gt;</span>我是footer<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Child<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>会显示成：</p><blockquote><p>我是header 我是子组件 我是footer 五、编辑作用域 父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译</p></blockquote><p>【Child组件模板】</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>{{msg}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">&#39;我是子组件里面的内容&#39;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>【父组件引用Child组件】</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Child</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>{{msg}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Child</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">&#39;我是父组件的内容&#39;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>六、解构slot-scope 在子组件中插槽中通过：data绑定了数据，父组件可以通过slot-scope=&quot;name&quot;来取得子组件作用域插槽： data绑定的数据，name的名称可以随便取，用来定义对象来代替取到的data数据。</p><p>【Child组件模板】</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>&lt;template&gt;
  &lt;div&gt;
    &lt;slot :data=&quot;data&quot;&gt;&lt;/slot&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  data() {
    return {
      data: [&#39;Neinei&#39;,&#39;Laoba&#39;,&#39;Demi&#39;,&#39;Feiyan&#39;]
    }
  }
}
&lt;/script&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>【父组件引用Child组件】</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>  &lt;template&gt;
    &lt;!-- 循环数据列表 --&gt;
    &lt;Child&gt;
      &lt;div slot-scope=&quot;msg&quot;&gt;
        &lt;span v-for=&quot;item in msg.data&quot;&gt;{{item}} &lt;/span&gt;
      &lt;/div&gt;
    &lt;/Child&gt;
 
    &lt;!-- 直接显示数据 --&gt;
    &lt;Child&gt;
      &lt;div slot-scope=&quot;msg&quot;&gt;
        &lt;span&gt;{{msg.data}} &lt;/span&gt;
      &lt;/div&gt;
    &lt;/Child&gt;
 
    &lt;!-- 不使用其提供的数据, 作用域插槽退变成匿名插槽 --&gt;
    &lt;Child&gt;
      &lt;div&gt;我是插槽&lt;/div&gt;
    &lt;/Child&gt;
  &lt;/template&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>显示为：</p><blockquote><p>Neinei Laoba Demi Feiyan [&#39;Neinei&#39;,&#39;Laoba&#39;,&#39;Demi&#39;,&#39;Feiyan&#39;] 我是插槽</p></blockquote><h3 id="vue的路由设置" tabindex="-1"><a class="header-anchor" href="#vue的路由设置" aria-hidden="true">#</a> vue的路由设置</h3><p>要引入vue-router.js库文件 作用： 根据url锚点的位置，在容器中加载不同的模块，本质是作为页面导航 完成SPA(Singal Page Application)的开发 一种特殊的web应用，它将所有活动局限于一个web页面中，仅web页面初始化时加载项应的html、JavaScript、css 一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示或隐藏），从而实现ui与用户的交互 下面是一个简单地单页面示例</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>&lt;div id=&quot;app&quot;&gt;
	&lt;ul&gt;
		&lt;li &gt;
			&lt;router-link to=&quot;/home&quot;&gt;首页&lt;/router-link&gt;
		&lt;/li&gt;
		&lt;li &gt;
			&lt;router-link to=&quot;/news&quot;&gt;新闻&lt;/router-link&gt;
		&lt;/li&gt;
		&lt;li &gt;
			&lt;router-link to=&quot;/hot&quot;&gt;热点&lt;/router-link&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
	&lt;div class=&quot;show&quot;&gt;
		&lt;router-view&gt;&lt;/router-view&gt;
	&lt;/div&gt;
	&lt;button @click=&quot;back()&quot;&gt;go back&lt;/button&gt;
&lt;/div&gt;
&lt;script&gt;
		const Home={template:&#39;&lt;h2&gt;首页&lt;/h2&gt;&#39;}
		const News={template:&#39;&lt;h2&gt;新闻&lt;/h2&gt;&#39;}
		const Hot={template:&#39;&lt;h2&gt;热点&lt;/h2&gt;&#39;}
		//Vue.extend(template:&#39;&lt;h1&gt;首页&lt;/h1&gt;&#39;)
		//配置路径
		const routes=[
			{
				path:&#39;/home&#39;,component:Home
			},
			{
				path:&#39;/news&#39;,component:News
			},
			{
				path:&#39;/hot&#39;,component:Hot
			}
		]
		
		//创建router
		const router = new VueRouter({
			routes
		})
		
		var vm = new Vue({
			el:&#39;#app&#39;,
			router,
			beforeCreate:function(){
				this.$router.push(&#39;/home&#39;).catch(err=&gt;{err})
			},
			methods:{
				back(){
					this.$router.go(-1);
				}
			}
		})
&lt;/script&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>二级路由的配置是在一级路由的基础上，在某一个path下再分离出几个低级的path 示例</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>{
	//新闻模块下有将新闻进行分类：科技、军事等；其他步骤不影响
	path:&#39;/news&#39;,component:News,
	children:[
		/* 二级路由，path分配，前面没有“ / ” */
		{
			path:&#39;js&#39;,
			component:{
				template:&#39;&lt;p&gt;军事类新闻&lt;/p&gt;&#39;
			}
		},
		{
			path:&#39;kj&#39;,
			component:{
				template:&#39;&lt;p&gt;科技类新闻&lt;/p&gt;&#39;
			}
		},
		{
			/* 默认页面可以直接用一个组件，也可以重定向 */
			path:&#39;/&#39;,
			redirect:&#39;js&#39;
			// component:{
			// 	template:&#39;&lt;p&gt;默认值&lt;/p&gt;&#39;
			// }
		}
	]
},

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="axios的使用" tabindex="-1"><a class="header-anchor" href="#axios的使用" aria-hidden="true">#</a> axios的使用</h3><p>axios的get方法使用 axios相关使用 一、axios安装 使用npm安装axios</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code>	npm install axios
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>使用cnpm安装axios</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code>	cnpm install axios
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>使用yarn安装axios</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code>	yarn install axios
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>使用cdn链接axios</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code>	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/axios/dist/axios.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>二、请求数据方法</p><ul><li>get请求：方式一：</li></ul><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>axios({
		// 默认请求方式为get
		method: &#39;get&#39;,
		url: &#39;api&#39;,
		// 传递参数
		params: {
			key: value
		},
		// 设置请求头信息
		headers: {
			key: value
		}
		responseType: &#39;json&#39;
	}).then(response =&gt; {
		// 请求成功
		let res = response.data;
		console.log(res);
	}).catch(error =&gt; {
		// 请求失败，
		console.log(error);
	});
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>get请求：方式二</li></ul><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>axios.get(&quot;api&quot;, {
		// 传递参数
		params: {
			key: value
		},
		// 设置请求头信息，可以传递空值
		headers: {
			key: value
		}
	}).then(response =&gt; {
		// 请求成功
		let res = response.data;
		console.log(res);
	}).catch(error =&gt; {
		// 请求失败，
		console.log(error);
	});
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>post请求：方式一</li></ul><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>// 注：post请求方法有的要求参数格式为formdata格式，此时需要借助 Qs.stringify()方法将对象转换为字符串
	let obj = qs.stringify({
		key: value
	});
	
	axios({
		method: &#39;post&#39;,
		url: &#39;api&#39;,
		// 传递参数
		data: obj,
		// 设置请求头信息
		headers: {
			key: value
		}
		responseType: &#39;json&#39;
	}).then(response =&gt; {
		// 请求成功
		let res = response.data;
		console.log(res);
	}).catch(error =&gt; {
		// 请求失败，
		console.log(error);
	});
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>post请求：方式二</li></ul><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>let data = {
			key: value
		},
		headers = {
			USERID: &quot;&quot;,
			TOKEN: &quot;&quot;
		};
	// 若无headers信息时，可传空对象占用参数位置
	axios.post(&quot;api&quot;, qs.stringify(data), {
		headers
	}
	}).then(response =&gt; {
		// 请求成功
		let res = response.data;
		console.log(res);
	}).catch(error =&gt; {
		// 请求失败，
		console.log(error);
	});
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>Qs的使用 引用cdn或者使用npm、cnpm或者yarn进行插件安装 使用cdn时，默认全局变量为Qs Qs基本方法使用 qs.stringify() 方法：将目标数据转换为string字符串 qs.parse() 方法：将对象字符串格式的数据转换为对象格式</li></ul></div></div><footer class="page-meta"><div class="meta-item edit-link"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M2 26h28v2H2z" fill="currentColor"></path><path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Edit this page<!--]--></span></span></div><div class="meta-item last-updated"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Last Updated 2023-04-08 09:19:01<!--]--></span></span></div></footer><!----><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">文章目录</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/blogs/vue/092102.html#vue基础" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="Vue基础"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Vue基础<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/vue/092102.html#vue-js是什么" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="Vue.js是什么"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Vue.js是什么<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/vue/092102.html#vue实例" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="Vue实例"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Vue实例<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/vue/092102.html#vue常用指令" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="vue常用指令"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue常用指令<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/vue/092102.html#生命周期函数-钩子函数" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="生命周期函数|钩子函数"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->生命周期函数|钩子函数<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/vue/092102.html#vue组件化应用构建" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="vue组件化应用构建"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue组件化应用构建<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/vue/092102.html#slot插槽" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="SLOT插槽"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->SLOT插槽<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/vue/092102.html#vue的路由设置" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="vue的路由设置"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue的路由设置<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/vue/092102.html#axios的使用" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="axios的使用"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->axios的使用<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/wb/assets/app-32a7af8e.js" defer></script>
  </body>
</html>
